<template>
  <div>
    <hr>
    <h3>Child03</h3>
<!--  用于测试严格模式的作用  -->
<!--    <p>{{this.$store.state.moduleA.moduleACount = 300}}</p>-->
    <p>{{this.$store.state.moduleA.moduleACount}}</p>
    <p>{{this.$store.state.moduleB.moduleBCount}}</p>
    <button @click="moduleAAddHandler">moduleA Count + 5</button>

  </div>
</template>

<script>
  import { createNamespacedHelpers  } from "vuex"
  const  { mapState,mapGetters,mapMutations,mapActions } = createNamespacedHelpers("moduleA")

  export default {
    name: "Child03",
    methods: {
      ...mapMutations(['addACount']),
      ...mapActions(['addACountAction']),
      moduleAAddHandler() {
        // 调用 mutation
        // this.$store.commit("moduleA/addACount", 5)
        // this.addACount(5)
        //调用action
        // this.$store.dispatch("moduleA/addACountAction", 5)
        this.addACountAction(5);
      }
    }
  }
</script>

<style scoped>

</style>
